	<template>
		<div class="page-wrap" data-title="订单列表页面">
			<div class="page-inner">
				<div class="section">
					<div class="sec-title">订单筛选</div>
					<div class="sec-ctx">
						<div class="filter-box">
							
							<div class="filter-item">
								<div class="filter-title">手机号或姓名</div>
								<div class="filter-val">
									<el-input v-model="phone" clearable  placeholder="请输入真实姓名或手机号"> </el-input>
								</div>
							</div>
							
							<div class="filter-item">
								<div class="filter-title">备注</div>
								<div class="filter-val">
									<el-input v-model="remark" clearable  placeholder="请输入备注"> </el-input>
								</div>
							</div>
							
							<div class="filter-item">
								<div class="filter-title">关键词</div>
								<div class="filter-val">
									<el-input v-model="keyword" clearable placeholder="请输入"> </el-input>
								</div>
							</div>
							<div class="filter-item">
								<div class="filter-title">下单时间</div>
								<div class="filter-val">
									<el-date-picker v-model="time_range" type="daterange" align="right" unlink-panels range-separator="至"
										start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"
										:picker-options="pickerOptions">
									</el-date-picker>
								</div>
							</div>
							<!-- <div class="filter-item">
								<div class="filter-title">关键词</div>
								<div class="filter-val">
									<el-input v-model="keyword" clearable placeholder="请输入"> </el-input>
								</div>
							</div> -->
							<!-- <div class="filter-item">
								<div class="filter-title">收货人手机号</div>
								<div class="filter-val">
									<el-input v-model="keyword" clearable placeholder="请输入"> </el-input>
								</div>
							</div> -->
							<div class="btn-box">
								<el-button type="primary" @click="setView()"> 搜索 </el-button>
								<el-button type="default" @click="resetSearch()"> 重置 </el-button>
							</div>
						</div>
					</div>
				</div>

				<div class="section">
					<div class="sec-title">订单列表</div>

					<div class="sec-ctx">
						<div class="tab-wrap">
							<div class="tab-box">
								<el-tabs v-model="tabName" @tab-click="tabClick">
									<el-tab-pane v-for="(item, index) in tabList" :key="index" :label="item.title" :name="item.name">
									</el-tab-pane>
								</el-tabs>
							</div>
							<div class="actions">
								<el-button type="primary" @click="do_export_all()">导出所有</el-button>
								<el-button type="primary" @click="do_export_filter()">导出筛选</el-button>
							</div>
						</div>

						<div class="order-list">
							<div class="order-title-box">
								<div class="sub">
									<div class="text">商品信息</div>
								</div>
								<div class="sub">单价 | 数量</div>
								<div class="sub">应收金额 </div>
								<div class="sub" style="flex:1.5;">购买人信息</div>
								<div class="sub">下单人姓名</div>
								<div class="sub">业务员</div>
								<div class="sub">上级代理</div>
								<div class="sub">佣金</div>
								<!-- <div class="sub">配送方式</div> -->
								<div class="sub">状态</div>
								<div class="sub">操作</div>
							</div>

							<div class="order-item" v-for="(item, index) in orderList" :key="index">
								<div class="item-top">
									<div class="t-left">
										<span>订单编号：{{ item.orderNo }}</span>
										<span class="divider"></span>
										<span>下单时间：{{ item.createdTime }}</span>
										<span class="divider"></span>
										<span v-if="item.remark" >备注：{{ item.remark }}</span>
									</div>
									<div class="t-right">
										{{ item.orderStatusText }}
									</div>
								</div>
								<div class="item-bottom">
									<div class="sub">
										<div class="product-box">
											<div class="product-item" v-for="(product_item, sub_index) in item.productJson" :key="sub_index">
												<div class="img-box">
													<el-image style="width: 50px; height: 50px" :src="product_item.image"
														:preview-src-list="[product_item.image]">
													</el-image>
												</div>
												<div class="title-box">
													<div class="title">{{ product_item.title }}</div>
													<div class="guige">{{ product_item.keyVals}}</div>
												</div>
												<div class="shuliang-box">
													<div class="price">￥ {{ product_item.priceSale }}</div>
													<div class="num">x {{ product_item.num }}</div>
												</div>
											</div>
										</div>
									</div>

									<div class="sub">￥{{item.price }} </div>
									<div class="sub" style="flex:1.5;">
									  <div class="shou-item">
										<div class="left"> 办理人姓名：</div>
										<div>{{item.cus_shouhuo_name }}</div>
									  </div>
									  <div class="shou-item">
										<div class="left"> 办理人联系电话：</div>
										<div>{{item.cus_shouhuo_phone }}</div>
									  </div>
									  <div class="shou-item">
										<div class="left"> 身份证号：</div>
										<div>{{item.cus_shouo_identityId }}</div>
									  </div>
									  <div class="shou-item">
										<div class="left"> 收货城市：</div>
										<div>{{item.cus_shouo_province }} {{item.cus_shouo_city }} {{item.cus_shouo_area }}</div>
									  </div>
									  <div class="shou-item">
										<div class="left"> 详细地址：</div>
										<div>{{item.cus_shouo_address }}</div>
									  </div>
									</div>
									<div class="sub">{{item.buyerName }} </div>
									<div class="sub">{{item.saleName }} </div>
									<div class="sub">{{item.shangjiName }} </div>
									<div class="sub">
										<div class="shou-item" style="width: 116px;" v-if="item.fanliJson.buyer_fanli>0">
										<div class="left" style="width:auto"> 自购佣金：</div>
										<div>{{item.fanliJson.buyer_fanli || 0}}</div>
										</div>
									  <div class="shou-item" style="width: 116px;">
										<div class="left" style="width:auto"> 上级佣金：</div>
										<div>{{item.fanliJson.shangji_fanli }}</div>
									  </div>
									  <div class="shou-item" style="width: 116px;" v-if="item.fanliJson.shangshangji_fanli>0">
										<div class="left" style="width:auto"> 上上级佣金：</div>
										<div>{{item.fanliJson.shangshangji_fanli }}</div>
									  </div>
										<div class="shou-item" style="width: 116px;" v-if="item.fanliJson.sale_fanli>0">
										<div class="left" style="width:auto"> 业务员佣金：</div>
										<div>{{item.fanliJson.sale_fanli }}</div>
										</div>
									</div>
									<!-- <div class="sub">{{item.peisongTypeText}}</div> -->
									<div class="sub">{{item.orderStatusText || item.orderStatus}}</div>
									<div class="sub">

										<div class="row-btns">
											<el-button type="text" @click="do_order_detail(item)">
												查看详情
											</el-button>
											<el-button type="text" @click="do_add_remark(item)">
												添加备注
											</el-button>
											<el-button v-if="item.orderStatus == 1" type="text" @click="do_order_offline_audit(item)">
												审核
											</el-button>
											<el-button v-if="item.orderStatus == 3 && item.ifChargePic==1 " type="text" @click="do_order_addImg(item)">
												提交充值图片
											</el-button>
											<el-button v-if="item.orderStatus == 3" type="text" @click="do_order_jihuo(item)">
												充值审核
											</el-button>
											<el-button v-if="item.orderStatus == 4 " type="text" @click="do_order_charge(item)">
												审核
											</el-button>
											<el-button v-if="item.orderStatus == 5" type="text" @click="do_order_jiesuan(item)">
												结算
											</el-button>
										</div>

									</div>
								</div>
							</div>
						</div>

						<div class="pagi-box">
							<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
								:current-page="pagination.page" :page-sizes="[10, 20, 50, 100, 200]"
								layout="total, sizes, prev, slot, next, jumper" :total="total" :pager-count="5">
								<span class="cus-current-page">
									<span> {{ pagination.page }}/{{ totalPage }} </span>
								</span>
							</el-pagination>
						</div>
					</div>
				</div>
			</div>

			<order_offline_audit_modal ref="order_offline_audit_modal" @confirm="confirm_offline_audit" />
			<order_jiesuan_modal ref="order_jiesuan_modal" @confirm="confirm_order_jiesuan" />
			
			<order_add_charge_modal ref="order_add_charge_modal" @confirm="confirm_order_add" />
			<order_add_remark_modal ref="order_add_remark_modal" @confirm="confirm_order_add_remark" />
			
		</div>
	</template>

	<script>
		import {
			SHOP_TYPE
		} from '@/config/env.js'


		import order_offline_audit_modal from '@/components/order/order_offline_audit_modal.vue'
		import order_jiesuan_modal from '@/components/order/order_jiesuan_modal.vue'
		import order_add_charge_modal from '@/components/order/order_add_charge_modal.vue'
		import order_add_remark_modal from '@/components/order/order_add_remark_modal.vue'
		

		import {
			mapState
		} from "vuex";
		export default {
			name: "order-manager",
			components: {
				order_offline_audit_modal,
				order_jiesuan_modal,
				order_add_charge_modal,
				order_add_remark_modal
			},
			data() {
				return {
					orderList: [],
					tabName: "全部",
					keyword: "",
					phone:"",
					tabSelect: {
						value: '',
						title: "全部",
						name: "全部"
					},
					pagination: {
						page: 1,
						pageNum: 10,
					},
					total: 0,
					remark:'',

					//
					time_range: [],

					pickerOptions: {
						disabledDate(time) {
							return time.getTime() > Date.now();
						},
						shortcuts: [{
								text: "最近一周",
								onClick(picker) {
									const end = new Date();
									const start = new Date();
									start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
									picker.$emit("pick", [start, end]);
								},
							},
							{
								text: "最近一个月",
								onClick(picker) {
									const end = new Date();
									const start = new Date();
									start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
									picker.$emit("pick", [start, end]);
								},
							},
							{
								text: "最近三个月",
								onClick(picker) {
									const end = new Date();
									const start = new Date();
									start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
									picker.$emit("pick", [start, end]);
								},
							},
						],
					},
				};
			},
			computed: {
				totalPage() {
					let pages = Math.ceil(this.total / this.pagination.pageNum);
					if (pages < 1) {
						pages = 1;
					}
					return pages;
				},
				tabList() {
					return [
						//状态（为空则全部） ：-5-待支付 -1-已取消 0-待成团 1-待审核 2-待发货 3-待收货 4-待自提 5-已完成
						// { title: "全部", name: "全部" },
						{
							value: '',
							title: "全部",
							name: "全部"
						},

						{
							value: -5,
							title: "待付款",
							name: "待付款"
						},
						// {
						// 	value: 0,
						// 	title: "待成团",
						// 	name: "待成团"
						// },
						{
							value: 1,
							title: "待审核",
							name: "待审核"
						},
						/* {
							value: 2,
							title: "待发货",
							name: "待发货"
						}, */
						{
							value: 3,
							title: "待收货",
							name: "待收货"
						},
						{
							value: 4,
							title: "充值审核",
							name: "充值审核"
						},
						{
							value: 5,
							title: "已充值",
							name: "已充值"
						},
						{
							value: 6,
							title: "不可结算",
							name: "不可结算"
						},
						{
							value: 7,
							title: "结算成功",
							name: "结算成功"
						},
						// {
						// 	value: 4,
						// 	title: "待自提",
						// 	name: "待自提"
						// },
						{
							value: 5,
							title: "已完成",
							name: "已完成"
						},
						{
							value: -1,
							title: "已取消",
							name: "已取消"
						},
						{
							value: -2,
							title: "审核失败",
							name: "审核失败"
						},
					];
				},
			},
			watch: {
				time_range(value) {
					console.log('time_range', value)
				}
			},
			beforeCreate(){
				console.log('beforeCreate')
			},
			created() {
				console.log(this.$route,'路由',this.tabSelect)
				let currentPage=sessionStorage.getItem('ordercurrentPage')
				let tabSelect=sessionStorage.getItem('tabSelect')
				tabSelect = tabSelect && JSON.parse(tabSelect)
				this.pagination.page=currentPage?currentPage:1
				if(tabSelect  && tabSelect.name){
					this.tabSelect = tabSelect
					this.tabName=tabSelect.name
				}
				this.setView();
			},
			mounted() {
				
			},
			beforeDestory() {
					
			},
			methods: {
				setView() {
					this.query_order()
				},
				
				confirm_order_add(){
					this.setView();
				},
				confirm_order_add_remark(){
					this.setView();
				},

				query_order() {
					console.log(this.tabSelect,'选择')
					this.$api({
						url: '/admin_service.php',
						method: "get",
						data: {
							action: "orders_getList",
							// orderType: 2,
							...this.pagination,
							orderStatus: this.tabSelect.value, //订单状态
							keyword: this.keyword,
							phone:this.phone,
							startTime: this.time_range[0] || '',
							endTime: this.time_range[1] || '',
							remark:this.remark
						},
					}).then((res) => {
						// console.warn("新闻详情", res);
						let {
							code,
							data,
							msg
						} = res
						if (res.code == 200) {
							let {
								list,
								count
							} = data;
							list.forEach((v) => {
								let priceJson = v.priceJson || {}
								// if(priceJson.AAA) {

								// }


								let shouhuoJson = v.shouhuoJson || {};
								let cus_shouhuo_name = ''
								let cus_shouhuo_phone = ''
								if (SHOP_TYPE == 'foreign') { //海外商城
									cus_shouhuo_name = shouhuoJson.firstName + ' ' + shouhuoJson.lastName
									cus_shouhuo_phone = shouhuoJson.phone
								} else {
									cus_shouhuo_name = shouhuoJson.name
									cus_shouhuo_phone = shouhuoJson.phone
								}
								v.cus_shouhuo_name = cus_shouhuo_name
								v.cus_shouhuo_phone = cus_shouhuo_phone
								
								
								v.cus_shouo_identityId = shouhuoJson.identityId
								v.cus_shouo_province = shouhuoJson.province
								v.cus_shouo_city = shouhuoJson.city
								v.cus_shouo_area = shouhuoJson.area
								v.cus_shouo_address = shouhuoJson.address
								
								
							});
							this.orderList = list;
							this.total = count;
						}
					});
				},

				resetSearch() {
					this.keyword = '';
					this.time_range = [];
					this.pagination.page = 1;
					this.setView();
				},

				tabClick(e) {
					console.log('切换标签 tabClick e', e)
					console.log('切换标签 tabClick tabName', this.tabName,this.tabSelect.name == this.tabName)
					this.pagination.page=1
					sessionStorage.removeItem('ordercurrentPage');
					if (this.tabSelect.name == this.tabName) {
						return
					}
					this.tabSelect = this.tabList.find(v => v.name == this.tabName)
					console.log(this.tabSelect,'100')
					sessionStorage.setItem('tabSelect', JSON.stringify(this.tabSelect)) 
					this.setView()
				},


				// 分页
				handleSizeChange(val) {
					console.log(`每页 ${val} 条`);
					
					this.pagination.pageNum = val;
					this.setView();
				},
				handleCurrentChange(val) {
					console.log(`当前页: ${val}`);
					
					sessionStorage.setItem('ordercurrentPage', val)
					this.pagination.page = val;

					this.setView();
				},
				//分页

				do_export_all() {
					let token = this.mix_get_token()
					let url =
						`${this.API_ROOT}?action=orders_daochu&page=1&pageSize=1000000&orderStatus=&keyword=&startTime=&endTime=&token=${token}`
					window.open(url, '_blank')
				},

				do_export_filter() {
					let token = this.mix_get_token()
					let startTime = this.time_range[0] || ''
					let endTime = this.time_range[1] || ''
					
					let url =
						`${this.API_ROOT}?action=orders_daochu&page=1&pageSize=1000000&orderStatus=${this.tabSelect.value}&keyword=${this.keyword}&startTime=${startTime}&endTime=${endTime}&token=${token}`
					window.open(url, '_blank')
				},


				do_order_detail(item) {
					this.$router.push('/order-detail?id=' + item.id)
				},
				// 
				do_order_offline_audit(item) {
					this.$refs.order_offline_audit_modal.init(item)
				},
				do_order_jiesuan(item) {
					this.$refs.order_jiesuan_modal.init(item)
				},
				do_order_addImg(item){
					this.$refs.order_add_charge_modal.init(item)
				},
				//添加备注
				do_add_remark(item) {
					this.$refs.order_add_remark_modal.init(item)
				},
				confirm_offline_audit() {
					this.setView()
				},
				confirm_order_jiesuan() {
					this.setView()
				},
				
				do_order_jihuo(item){
					this.$confirm('确认审核成功吗?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.doJihuo(item);
					}).catch(() => {
					
					});
				},
				doJihuo(item){
					this.$api({
						url: '/admin_service.php',
						method: "get",
						data: {
							action: "orders_updateOrder",
							id:item.id,
							updateType: 3, //更新类型：1-审核失败（需要填原因） 2-审核成功（需要填发货信息） 3-已激活
							chargePic:item.chargePic
						},
					}).then((res) => {
						this.$message({
							message: res.msg,
							type: 'success'
						})
						this.setView()
					})
				},
				do_order_charge(item){
						this.$confirm('确认已充值吗?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							this.doCharge(item);
						}).catch(() => {
						
						});
				},
				doCharge(item){
					this.$api({
						url: '/admin_service.php',
						method: "get",
						data: {
							action: "orders_updateOrder",
							id:item.id,
							updateType:4, //更新类型：1-审核失败（需要填原因） 2-审核成功（需要填发货信息） 3-已激活  4-已充值
						},
					}).then((res) => {
						this.$message({
							message: res.msg,
							type: 'success'
						})
						this.setView()
					})
				},
			},
		};
	</script>

	<style scoped lang="less">
		.cus-current-page {
			text-align: center;
		}

		.page-wrap {
			.page-inner {}
		}

		.section {
			margin-bottom: 10px;
			background: #fff;
			padding: 20px;
			border-radius: 6px;
		}

		.sec-title {
			margin-bottom: 20px;
			font-size: 14px;
			font-weight: bold;
		}

		.sec-ctx {}

		.filter-box {
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			.btn-box {
				margin-bottom: 15px;
			}

			.filter-item {
				margin-bottom: 15px;
				display: flex;
				align-items: center;
				margin-right: 30px;

				.filter-title {
					margin-right: 15px;
				}

				.filter-val {}
			}
		}

		.tab-wrap {
			user-select: none;
			position: relative;

			.actions {
				position: absolute;
				right: 0;
				top: 0;
			}
		}

		// 商品信息
		.order-list {
			.order-title-box {
				margin-bottom: 20px;
				display: flex;
				color: #44434b;
				padding: 12px 0;
				padding-top: 17px;
				height: 46px;
				background: rgba(208, 214, 228, 0.2);
				font-weight: 700;

				.sub {
					flex: 1;
						
				}

				.sub:nth-child(1) {
					flex: 2.3;

					.text {
						padding-left: 20px;
					}
				}

				.sub:nth-child(2) {}

				.sub:nth-child(3) {}

				.sub:nth-child(4) {}

				.sub:nth-child(5) {}

				.sub:nth-child(6) {}

				.sub:nth-child(7) {}
			}

			.order-item {
				margin-bottom: 20px;
				border: 1px solid #d0d6e4;
				border-radius: 10px;

				.item-top {
					display: flex;
					justify-content: space-between;
					color: #44434b;
					padding: 12px 20px;
					padding-top: 17px;
					height: 46px;
					background: rgba(208, 214, 228, 0.2);
					font-weight: 700;

					.t-left {
						.flex();

						.divider {
							width: 1px;
							height: 14px;
							background: #ccc;
							margin: 0 15px;
						}
					}

					.t-right {
						margin-left: 30px;
						color: @theme;
					}
				}

				.item-bottom {
					display: flex;
					align-items: center;

					.sub {
						flex: 1;
						.shou-item{
							display: flex;
							align-items: center;
							.left{
								width: 100px;
							}
						}
					}

					.sub:nth-child(1) {
						flex: 3;
					}

					.sub:nth-child(2) {}

					.sub:nth-child(3) {}

					.sub:nth-child(4) {}

					.sub:nth-child(5) {}

					.sub:nth-child(6) {}

					.sub:nth-child(7) {}
				}

				.product-box {
					padding-left: 15px;

					.product-item {
						position: relative;
						display: flex;
						align-items: center;
						padding: 10px;

						&+.product-item {
							&::before {
								position: absolute;
								top: 0;
								content: "";
								width: calc(100% - 70px);
								height: 1px;
								background: #ddd;
							}
						}

						.img-box {
							flex: 1;
						}

						.title-box {
							flex: 2;

							.title {
								margin-bottom: 10px;
								color: #655eff;
								cursor: pointer;
							}

							.guige {}
						}

						.shuliang-box {
							flex: 1;

							.price {
								margin-bottom: 15px;
							}

							.num {}
						}
					}
				}
			}
		}

		.pagi-box {
			margin-top: 20px;
			text-align: right;
		}
	</style>